<template>
  <view class="exam-container">
    <view class="ap_box">
      <view class="left_30"></view>
      <view class="info_item_box info_item" v-for="item in list" :key="item.id" @click="goExamDetail(item.id)">
        <view class="title_icon">
          <label class="title_info">{{item.examStatus}}</label>
        </view>
        <view class="title_info_time">
          {{formatDate(item.endTime,'YYYY年MM月DD日')}}
        </view>
        <view class="title_info_content">
          <view class="box">
            <view class="box_1">
              {{item.examStatus}}
            </view>
            <view class="box_2">
              {{item.examName}}
            </view>
            <view class="box_3">
              {{formatDate(item.beginTime,'YYYY-MM-DD')}}
            </view>
            <view class="box_3"></view>
          </view>
        </view>
      </view>
      <!-- <view class="info_item_box info_item1">
        <view class="title_icon">
          <label class="title_info">最近</label>
        </view>
        <view class="title_info_time">
          2024年1月3日结束
        </view>
        <view class="title_info_content">
          <view class="box">
            <view class="box_1">
              考试中
            </view>
            <view class="box_2">
              张家口运用车间2023年调图培训
            </view>
            <view class="box_3">
              2023-02-05
            </view>
            <view style="width: 100%;float: left;">
              <view class="btn_001 btn_001_0">菜单式</view>
            </view>
            <view class="box_3"></view>
          </view>
        </view>
      </view>
      <view class="info_item_box info_item2">
        <view class="title_icon">
          <label class="title_info">待开始</label>
        </view>
        <view class="title_info_time">
          2024年1月3日结束
        </view>
        <view class="title_info_content">
          <view class="box">
            <view class="box_1">
              未开始
            </view>
            <view class="box_2">
              冬季防雾闪、防污闪、等故障处理程序
            </view>
            <view class="box_3">
              2023-02-05
            </view>
            <view style="width: 100%;float: left;">
              <view class="btn_001 btn_001_0">菜单式</view>
              <view class="btn_001 btn_001_1">线上培训</view>
              <view class="btn_001 btn_001_2">适应性</view>
              <view class="btn_001 btn_001_3">非脱产</view>
              <view class="btn_001 btn_001_4">培训科目</view>
            </view>
            <view class="box_2 info_01">
              为进一步提升中国铁路专项工作人员常态化疫情防控水平和应急处置能力，进行疫情防控知识专项技能培训。
            </view>
            <view class="box_3">

            </view>
          </view>
        </view>
      </view> -->
    </view>
    <view class="ks_title">
      考试数据
    </view>
    <view class="ks_info color3">
      <view class="b1">
        <view class="info">
          <text class="a1">{{overview.allnums}}</text>
          <text class="a2">场</text>
        </view>
        <view class="msg">
          本年度总考试数
        </view>
      </view>
      <view class="b1">
        <view class="info ">
          <text class="a1 color1">{{overview.pass}}</text>
          <text class="a2 color1">场</text>
        </view>
        <view class="msg">
          及格次数
        </view>
      </view>
      <view class="b1">
        <view class="info ">
          <text class="a1 color2">{{overview.fail}}</text>
          <text class="a2 color2">场</text>
        </view>
        <view class="msg">
          不及格次数
        </view>
      </view>
      <view class="b1">
        <view class="info ">
          <text class="a1 color3">{{overview.uncommitts}}</text>
          <text class="a2 color3">场</text>
        </view>
        <view class="msg">
          未参加
        </view>
      </view>
    </view>
    <view class="mt180"></view>
  </view>
</template>

<script>
  import dayjs from 'dayjs';
  import {
    getExamData,
    getExamList
  }
  from "@/common/api/exam/exam.js";
  export default {
    name: 'ExamPage',
    data() {
      return {
        list: [],
        overview: {
          allnums: 0,
          pass: 0,
          fail: 0,
          uncommitts: 0
        }
      }
    },
    mounted() {
      this.getExamOverview();
      this.getExamListData();
    },
    methods: {
      goExamDetail(id) {
        uni.navigateTo({
          url: `/pages/exam/detail?id=${id}`
        })
      },
      getExamOverview() {
        getExamData().then((res) => {
          if (res && res.code == 200) {
            this.overview = res.data[0]
          }
        });
      },
      getExamListData() {
        getExamList().then((res) => {
          if (res && res.code == 200) {
            this.list = res.data
          }
        });
      },
      formatDate(str, formatter) {
        return dayjs(str).format(formatter) // 'YYYY年MM月dd日'
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import url("../../../common/base.css");
  
  .exam-container{
    padding: 4%;
    padding-top: 180rpx;
  }

  .ap_box {
    width: 100%;
    background: white;
    border-radius: 30rpx;
    overflow: hidden;
  }

  .info_item_box {
    width: 95%;
    float: left;
    margin-left: 4%;
    height: auto;
  }

  .title_info_time {
    float: left;
    line-height: 40rpx;
    margin-left: 15rpx;
  }

  .info_item {
    .title_icon {
      width: 140rpx;
      height: 40rpx;
      background: url("../../../static/icon-1.png");
      background-size: 140rpx 40rpx;
      float: left;
    }

    .title_info_content {
      width: 98%;
      float: left;
      border-left: #cccccc dashed 4rpx;
      height: auto;
      margin-left: 2%;
      padding-bottom: 30rpx;

      .box {
        width: 93%;
        background: linear-gradient(to bottom, #FCEAEC, #ffffff);
        height: 200rpx;
        margin-left: 5%;
        margin-top: 20rpx;
        border-radius: 20rpx;
        line-height: 50rpx;

        .box_1 {
          font-size: 25rpx;
          color: #FF3649;
          width: 120rpx;
          float: right;
          background: #FCD8DB;
          height: 50rpx;
          border-top-right-radius: 30rpx;
          border-bottom-left-radius: 30rpx;
          text-align: center;
        }
      }
    }
  }

  .title_info {
    color: white;
    margin-left: 50rpx;
    font-size: 22rpx;
    float: left;
    line-height: 40rpx;
  }

  .info_item1 {

    .title_icon {
      width: 140rpx;
      height: 40rpx;
      background: url("../../../static/icon-2.png");
      background-size: 140rpx 40rpx;
      float: left;
    }

    .title_info_content {
      width: 98%;
      float: left;
      border-left: #cccccc dashed 4rpx;
      height: auto;
      margin-left: 2%;

      .box {
        width: 93%;
        background: linear-gradient(to bottom, #D0F3E7, #ffffff);
        height: 200rpx;
        margin-left: 5%;
        margin-top: 20rpx;
        border-radius: 20rpx;
        line-height: 50rpx;

        .box_1 {
          font-size: 25rpx;
          color: #1BB683;
          width: 120rpx;
          float: right;
          background: #BCEBDC;
          height: 50rpx;
          border-top-right-radius: 30rpx;
          border-bottom-left-radius: 30rpx;
          text-align: center;
        }
      }
    }
  }

  .info_item2 {

    .title_icon {
      width: 140rpx;
      height: 40rpx;
      background: url("../../../static/icon-3.png");
      background-size: 140rpx 40rpx;
      float: left;
    }

    .title_info_content {
      width: 98%;
      float: left;
      border-left: #cccccc dashed 4rpx;
      height: auto;
      margin-left: 2%;

      .box {
        width: 93%;
        background: linear-gradient(to bottom, #E5EEFD, #ffffff);
        height: 200rpx;
        margin-left: 5%;
        margin-top: 20rpx;
        border-radius: 20rpx;
        line-height: 50rpx;

        .box_1 {
          font-size: 25rpx;
          color: #3881FE;
          width: 120rpx;
          float: right;
          background: #D0E1FD;
          height: 50rpx;
          border-top-right-radius: 30rpx;
          border-bottom-left-radius: 30rpx;
          text-align: center;
        }
      }
    }
  }

  .title_icon2 {
    width: 180rpx;
    height: 50rpx;
    background: url("../../../static/icon-2.png");
    background-size: 180rpx 50rpx;
    line-height: 50rpx;
    float: left;
  }

  .title_icon3 {
    width: 180rpx;
    height: 50rpx;
    background: url("../../../static/icon-3.png");
    background-size: 180rpx 50rpx;
    line-height: 50rpx;
    float: left;
  }

  .ks_title {
    width: 94%;
    margin-top: 60rpx;
    font-size: 38rpx;
    font-weight: bold;
  }

  .ks_info {
    margin-top: 40rpx;
    background: white;
    height: 200rpx;
    border-radius: 25rpx;
    color: #646464;

    .b1 {
      width: 25%;
      float: left;
      height: 80rpx;
      margin-top: 50rpx;
      border-right: 3rpx solid #cccccc;

      &:last-child {
        border-right: none;
      }

      .info {
        width: 100%;
        float: left;
        text-align: center;
        color: #1A61FD;

        .a1 {
          font-size: 45rpx;
        }

        .a2 {
          font-size: 22rpx;
        }
      }

      .msg {
        font-size: 22rpx;
        text-align: center;
      }
    }

    .color1 {
      color: #289C75;
    }

    .color2 {
      color: #E66672;
    }

    .color3 {
      color: #646464;
    }
  }

  .box_2 {
    width: 95%;
    float: left;
    line-height: 50rpx;
    margin-left: 5%;
    margin-top: -20rpx;
    font-weight: bold;
    font-size: 30rpx;
    color: #323232;
    line-height: 42rpx;
  }

  .box_3 {
    width: 95%;
    float: left;
    height: 50rpx;
    margin-left: 5%;
    color: #B7BDBB;
    font-size: 25rpx;
  }

  .info_01 {
    font-size: 22rpx;
    float: left;
    border-top: #8f8f94 dashed 3rpx;
    margin-top: 30rpx;
    color: #969696;
    padding: 10rpx 0;
  }
</style>